{# templates/pos/dash_ticketing.html #}
{# Travel Agency — Full-Featured Dashboard: Tickets, Visa, Hotel, Transport, Insurance #}
{# Include inside index.html when pos_type == "ticketing" #}

<style>
/* ══════════════════════════════════════════════════════════════════
   TRAVEL AGENCY DASHBOARD  —  Complete Redesign v2.0
   ══════════════════════════════════════════════════════════════════ */
:root {
  --tk-blue:    #01478f;
  --tk-blue2:   #0060c0;
  --tk-green:   #16a34a;
  --tk-red:     #dc2626;
  --tk-gold:    #b45309;
  --tk-purple:  #7c3aed;
  --tk-cyan:    #0891b2;
  --tk-orange:  #ea580c;
  --tk-pink:    #be185d;
  --tk-teal:    #0d9488;
  --tk-border:  rgba(15,23,42,.08);
  --tk-bg:      #f0f2f5;
  --tk-radius:  12px;
  --tk-shadow:  0 4px 16px rgba(2,6,23,.07);
}

/* ── KPI Grid ── */
.tk-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: .55rem;
  margin-bottom: .75rem;
}
.tk-kpi {
  background: #fff;
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  padding: .65rem .8rem;
  box-shadow: var(--tk-shadow);
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.tk-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(2,6,23,.1); }
.tk-kpi::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
}
.tk-kpi.c-blue::before   { background: var(--tk-blue); }
.tk-kpi.c-green::before  { background: var(--tk-green); }
.tk-kpi.c-red::before    { background: var(--tk-red); }
.tk-kpi.c-gold::before   { background: var(--tk-gold); }
.tk-kpi.c-purple::before { background: var(--tk-purple); }
.tk-kpi.c-cyan::before   { background: var(--tk-cyan); }
.tk-kpi.c-orange::before { background: var(--tk-orange); }
.tk-kpi.c-pink::before   { background: var(--tk-pink); }
.tk-kpi.c-teal::before   { background: var(--tk-teal); }

.tk-kpi-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tk-kpi-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.c-blue   .tk-kpi-icon { background: rgba(1,71,143,.1);    color: var(--tk-blue); }
.c-green  .tk-kpi-icon { background: rgba(22,163,74,.1);   color: var(--tk-green); }
.c-red    .tk-kpi-icon { background: rgba(220,38,38,.1);   color: var(--tk-red); }
.c-gold   .tk-kpi-icon { background: rgba(180,83,9,.1);    color: var(--tk-gold); }
.c-purple .tk-kpi-icon { background: rgba(124,58,237,.1);  color: var(--tk-purple); }
.c-cyan   .tk-kpi-icon { background: rgba(8,145,178,.1);   color: var(--tk-cyan); }
.c-orange .tk-kpi-icon { background: rgba(234,88,12,.1);   color: var(--tk-orange); }
.c-pink   .tk-kpi-icon { background: rgba(190,24,93,.1);   color: var(--tk-pink); }
.c-teal   .tk-kpi-icon { background: rgba(13,148,136,.1);  color: var(--tk-teal); }

.tk-kpi-label { font-size: .65rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px; }
.tk-kpi-value { font-size: 1.05rem; font-weight: 900; color: #0f172a; margin-top: .12rem; line-height: 1.2; }
.tk-kpi-sub   { font-size: .68rem; color: #94a3b8; margin-top: .08rem; }

/* ── Section Divider ── */
.tk-section-label {
  font-size: .68rem; font-weight: 800; color: #64748b;
  text-transform: uppercase; letter-spacing: .6px;
  padding: .3rem 0 .3rem .2rem;
  border-left: 3px solid var(--tk-blue);
  padding-left: .6rem;
  margin-bottom: .5rem;
  margin-top: .3rem;
}

/* ── Panels ── */
.tk-panel {
  background: #fff;
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  box-shadow: var(--tk-shadow);
  margin-bottom: .7rem;
}
.tk-panel-head {
  padding: .6rem .85rem;
  border-bottom: 1px solid rgba(15,23,42,.06);
  display: flex; justify-content: space-between; align-items: center;
}
.tk-panel-title { font-weight: 900; color: #0f172a; font-size: .85rem; }
.tk-panel-sub   { color: #64748b; font-size: .74rem; }
.tk-panel-body  { padding: .7rem .85rem; }

/* ── Charts ── */
.tk-chart-box { position: relative; width: 100%; height: 200px; }
.tk-chart-box canvas { width: 100% !important; height: 100% !important; display: block; }

/* ── Tables ── */
.tk-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tk-table th {
  font-size: .65rem; font-weight: 800; color: #64748b;
  text-transform: uppercase; padding: .42rem .65rem;
  border-bottom: 2px solid #e5e7eb; text-align: left; white-space: nowrap;
}
.tk-table td { padding: .42rem .65rem; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.tk-table tr:hover td { background: #f8fafc; }
.tk-table .tr { text-align: right; }
.tk-table a { color: var(--tk-blue); font-weight: 800; text-decoration: none; }
.tk-table a:hover { text-decoration: underline; }

/* ── Badges ── */
.tk-badge { padding: .18rem .55rem; border-radius: 999px; font-size: .65rem; font-weight: 800; display: inline-block; }
.tk-badge-issued    { background: #dcfce7; color: #166534; }
.tk-badge-refunded  { background: #fef2f2; color: #991b1b; }
.tk-badge-ticket    { background: #dbeafe; color: #1e40af; }
.tk-badge-visa      { background: #ede9fe; color: #5b21b6; }
.tk-badge-hotel     { background: #fef9c3; color: #854d0e; }
.tk-badge-transport { background: #d1fae5; color: #065f46; }
.tk-badge-insurance { background: #fee2e2; color: #991b1b; }
.tk-badge-umrah     { background: #fdf2f8; color: #9d174d; }

/* ── Service Type Tabs ── */
.tk-svc-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .65rem; }
.tk-svc-tab {
  padding: .3rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 800;
  cursor: pointer; border: 1.5px solid #e2e8f0; background: #fff; color: #64748b;
  transition: all .15s; white-space: nowrap;
}
.tk-svc-tab.active { color: #fff; border-color: transparent; }
.tk-svc-tab[data-svc="all"].active      { background: var(--tk-blue); }
.tk-svc-tab[data-svc="ticket"].active   { background: #1e40af; }
.tk-svc-tab[data-svc="visa"].active     { background: var(--tk-purple); }
.tk-svc-tab[data-svc="hotel"].active    { background: var(--tk-gold); }
.tk-svc-tab[data-svc="transport"].active{ background: var(--tk-teal); }
.tk-svc-tab[data-svc="insurance"].active{ background: var(--tk-red); }
.tk-svc-tab[data-svc="umrah"].active    { background: var(--tk-pink); }
.tk-svc-tab:hover:not(.active) { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }

/* ── Advanced Search Panel ── */
.tk-search-panel {
  background: #fff;
  border: 1.5px solid var(--tk-blue);
  border-radius: var(--tk-radius);
  box-shadow: 0 4px 20px rgba(1,71,143,.12);
  margin-bottom: .75rem;
  overflow: hidden;
}
.tk-search-head {
  background: linear-gradient(135deg, var(--tk-blue) 0%, #0060c0 100%);
  padding: .65rem .9rem;
  display: flex; justify-content: space-between; align-items: center;
}
.tk-search-head h6 { margin: 0; color: #fff; font-weight: 900; font-size: .88rem; }
.tk-search-body { padding: .8rem .9rem; }
.tk-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .55rem;
  margin-bottom: .65rem;
}
.tk-sf { display: flex; flex-direction: column; gap: .2rem; }
.tk-sf label { font-size: .65rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .3px; }
.tk-sf input, .tk-sf select {
  height: 32px; font-size: .78rem; border: 1px solid #e2e8f0;
  border-radius: 7px; padding: 0 .6rem;
  transition: border-color .15s, box-shadow .15s;
}
.tk-sf input:focus, .tk-sf select:focus {
  border-color: var(--tk-blue); outline: none;
  box-shadow: 0 0 0 2px rgba(1,71,143,.12);
}
.tk-search-results {
  border-top: 1px solid #f1f5f9;
  padding-top: .7rem;
  max-height: 320px;
  overflow-y: auto;
}
.tk-search-results .tk-table th { background: #f8fafc; }
#tkSearchEmpty {
  text-align: center; padding: 1.5rem;
  color: #94a3b8; font-size: .82rem; font-weight: 600;
}

/* ── Income Bar ── */
.tk-inc-bar-wrap { height: 10px; border-radius: 5px; overflow: hidden; display: flex; margin: .4rem 0; }
.tk-inc-bar-wrap .seg { transition: width .6s ease; }

/* ── Balance Mini Cards ── */
.tk-bal-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tk-bal-item { padding: .5rem .65rem; border-radius: 9px; border: 1px solid; }
.tk-bal-item .blab { font-size: .62rem; font-weight: 700; color: #64748b; text-transform: uppercase; }
.tk-bal-item .bval { font-size: .95rem; font-weight: 900; margin-top: .1rem; }
.tk-bal-ar   { background: #f0fdf4; border-color: #bbf7d0; }  .tk-bal-ar .bval  { color: #166534; }
.tk-bal-ap   { background: #fef2f2; border-color: #fecaca; }  .tk-bal-ap .bval  { color: #991b1b; }
.tk-bal-bank { background: #eff6ff; border-color: #bfdbfe; }  .tk-bal-bank .bval{ color: #1e40af; }
.tk-bal-net  { background: #faf5ff; border-color: #ede9fe; }  .tk-bal-net .bval { color: #5b21b6; }

/* ── Skeleton ── */
.tk-skel { background: linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); background-size:200% 100%; animation:tksk 1.2s ease-in-out infinite; border-radius:6px; height:36px; }
@keyframes tksk { 0%{background-position:0 0} 100%{background-position:-200% 0} }

/* ── Quick Stat Inline ── */
.tk-inline-stats { display: flex; gap: 1.2rem; flex-wrap: wrap; padding: .5rem .85rem; background: #f8fafc; border-top: 1px solid #f1f5f9; }
.tk-inline-stat .is-label { font-size: .62rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; }
.tk-inline-stat .is-val   { font-size: .85rem; font-weight: 900; color: #0f172a; }

/* ── Scrollable table wrapper ── */
.tk-tbl-scroll { max-height: 260px; overflow-y: auto; }
.tk-tbl-scroll::-webkit-scrollbar { width: 4px; }
.tk-tbl-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* ── Responsive ── */
@media(max-width:767px){
  .tk-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .tk-search-grid { grid-template-columns: 1fr 1fr; }
  .tk-bal-row { grid-template-columns: 1fr; }
}
@media print {
  .tk-search-panel, .tk-svc-tabs, .no-print { display: none !important; }
}
</style>

<!-- ══════════════════════════════════════════════════════════════
     RANGE + SERVICE TYPE BAR
     ══════════════════════════════════════════════════════════════ -->
<div class="tk-svc-tabs no-print">
  <div class="tk-svc-tab active" data-svc="all"><i class="fas fa-globe mr-1"></i>All Services</div>
  <div class="tk-svc-tab" data-svc="ticket"><i class="fas fa-plane mr-1"></i>Tickets</div>
  <div class="tk-svc-tab" data-svc="visa"><i class="fas fa-passport mr-1"></i>Visa</div>
  <div class="tk-svc-tab" data-svc="hotel"><i class="fas fa-hotel mr-1"></i>Hotel</div>
  <div class="tk-svc-tab" data-svc="transport"><i class="fas fa-bus mr-1"></i>Transport</div>
  <div class="tk-svc-tab" data-svc="insurance"><i class="fas fa-shield-alt mr-1"></i>Insurance</div>
  <div class="tk-svc-tab" data-svc="umrah"><i class="fas fa-kaaba mr-1"></i>Umrah / Hajj</div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     KPI ROW 1 — CORE FINANCIAL
     ══════════════════════════════════════════════════════════════ -->
<div class="tk-section-label"><i class="fas fa-tachometer-alt mr-1"></i>Financial Overview — <span id="tkRangeLabel">—</span></div>

<div class="tk-kpi-grid" id="tkKpiGrid">
  <!-- Total Invoices -->
  <div class="tk-kpi c-blue">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Total Invoices</div>
        <div class="tk-kpi-value" id="tkInvCount">—</div>
        <div class="tk-kpi-sub"><span id="tkIssuedCount">0</span> issued · <span id="tkRefundedCount">0</span> refunded</div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-file-invoice"></i></div>
    </div>
  </div>

  <!-- Total Receivable -->
  <div class="tk-kpi c-green">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Total Receivable</div>
        <div class="tk-kpi-value" id="tkRecv">—</div>
        <div class="tk-kpi-sub">Cash: <span id="tkCashRecv">0</span></div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-hand-holding-usd"></i></div>
    </div>
  </div>

  <!-- Pending Receivable -->
  <div class="tk-kpi c-orange">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Pending Balance</div>
        <div class="tk-kpi-value" id="tkPendRecv">—</div>
        <div class="tk-kpi-sub">Uncollected credit</div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-hourglass-half"></i></div>
    </div>
  </div>

  <!-- Total Payable -->
  <div class="tk-kpi c-red">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Total Payable</div>
        <div class="tk-kpi-value" id="tkPay">—</div>
        <div class="tk-kpi-sub">To suppliers/airlines</div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-plane-departure"></i></div>
    </div>
  </div>

  <!-- Agency Income -->
  <div class="tk-kpi c-gold">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Agency Income</div>
        <div class="tk-kpi-value" id="tkIncome">—</div>
        <div class="tk-kpi-sub">Avg: <span id="tkAvgIncome">0</span>/inv</div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-coins"></i></div>
    </div>
  </div>

  <!-- Commission -->
  <div class="tk-kpi c-purple">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Commission</div>
        <div class="tk-kpi-value" id="tkComm">—</div>
        <div class="tk-kpi-sub">Airline incentive</div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-percentage"></i></div>
    </div>
  </div>

  <!-- PSF -->
  <div class="tk-kpi c-cyan">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">PSF / Service Fees</div>
        <div class="tk-kpi-value" id="tkPSF">—</div>
        <div class="tk-kpi-sub">Per-ticket charge</div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-concierge-bell"></i></div>
    </div>
  </div>

  <!-- Bank Balance -->
  <div class="tk-kpi c-teal">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Bank Balance</div>
        <div class="tk-kpi-value" id="tkBank">—</div>
        <div class="tk-kpi-sub">All accounts</div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-university"></i></div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     KPI ROW 2 — SERVICE BREAKDOWN
     ══════════════════════════════════════════════════════════════ -->
<div class="tk-section-label"><i class="fas fa-layer-group mr-1"></i>Service-wise Breakdown</div>
<div class="tk-kpi-grid">

  <!-- Tickets -->
  <div class="tk-kpi c-blue">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Ticket Invoices</div>
        <div class="tk-kpi-value" id="svcTicketCount">—</div>
        <div class="tk-kpi-sub">Income: <span id="svcTicketIncome">0</span></div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-plane"></i></div>
    </div>
  </div>

  <!-- Visa -->
  <div class="tk-kpi c-purple">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Visa Invoices</div>
        <div class="tk-kpi-value" id="svcVisaCount">—</div>
        <div class="tk-kpi-sub">Income: <span id="svcVisaIncome">0</span></div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-passport"></i></div>
    </div>
  </div>

  <!-- Hotel -->
  <div class="tk-kpi c-gold">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Hotel Bookings</div>
        <div class="tk-kpi-value" id="svcHotelCount">—</div>
        <div class="tk-kpi-sub">Income: <span id="svcHotelIncome">0</span></div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-hotel"></i></div>
    </div>
  </div>

  <!-- Transport -->
  <div class="tk-kpi c-teal">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Transport</div>
        <div class="tk-kpi-value" id="svcTransportCount">—</div>
        <div class="tk-kpi-sub">Income: <span id="svcTransportIncome">0</span></div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-bus"></i></div>
    </div>
  </div>

  <!-- Insurance -->
  <div class="tk-kpi c-red">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Insurance</div>
        <div class="tk-kpi-value" id="svcInsuranceCount">—</div>
        <div class="tk-kpi-sub">Income: <span id="svcInsuranceIncome">0</span></div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-shield-alt"></i></div>
    </div>
  </div>

  <!-- Umrah / Hajj -->
  <div class="tk-kpi c-pink">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Umrah / Hajj</div>
        <div class="tk-kpi-value" id="svcUmrahCount">—</div>
        <div class="tk-kpi-sub">Income: <span id="svcUmrahIncome">0</span></div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-kaaba"></i></div>
    </div>
  </div>

  <!-- Refund Stats -->
  <div class="tk-kpi c-orange">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Refunds Issued</div>
        <div class="tk-kpi-value" id="tkRefundCount2">—</div>
        <div class="tk-kpi-sub">Paid to clients: <span id="tkRfndToClient">0</span></div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-undo"></i></div>
    </div>
  </div>

  <!-- Individual Tickets -->
  <div class="tk-kpi c-cyan">
    <div class="tk-kpi-top">
      <div>
        <div class="tk-kpi-label">Individual Tickets</div>
        <div class="tk-kpi-value" id="tkTicketCount">—</div>
        <div class="tk-kpi-sub">Across all invoices</div>
      </div>
      <div class="tk-kpi-icon"><i class="fas fa-ticket-alt"></i></div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     ADVANCED INVOICE SEARCH PANEL
     ══════════════════════════════════════════════════════════════ -->
<div class="tk-search-panel no-print">
  <div class="tk-search-head">
    <h6><i class="fas fa-search mr-2"></i>Advanced Invoice Search</h6>
    <div class="d-flex align-items-center gap-2">
      <span class="text-white-50" style="font-size:.72rem;">Search by Folder#, PNR, Passport, CNIC, Ticket#, Client...</span>
      <button class="btn btn-sm btn-light" id="tkSearchClear" style="font-size:.72rem;padding:2px 10px;border-radius:6px;">
        <i class="fas fa-times mr-1"></i>Clear
      </button>
    </div>
  </div>
  <div class="tk-search-body">
    <div class="tk-search-grid">
      <div class="tk-sf">
        <label><i class="fas fa-folder mr-1"></i>Folder / Invoice #</label>
        <input type="text" id="srchFolder" placeholder="e.g. 1042">
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-barcode mr-1"></i>PNR / Reference</label>
        <input type="text" id="srchPNR" placeholder="e.g. ABC123">
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-id-card mr-1"></i>Passport No.</label>
        <input type="text" id="srchPassport" placeholder="e.g. AK1234567">
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-address-card mr-1"></i>CNIC</label>
        <input type="text" id="srchCNIC" placeholder="e.g. 35202-1234567-1">
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-ticket-alt mr-1"></i>Ticket Number</label>
        <input type="text" id="srchTicket" placeholder="e.g. 673-1234567890">
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-user mr-1"></i>Client / Pax Name</label>
        <input type="text" id="srchClient" placeholder="Name or partial...">
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-phone mr-1"></i>Phone / Mobile</label>
        <input type="text" id="srchPhone" placeholder="03xx-xxxxxxx">
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-plane mr-1"></i>Airline / Service</label>
        <select id="srchSvcType">
          <option value="">All Types</option>
          <option value="ticket">Ticket</option>
          <option value="visa">Visa</option>
          <option value="hotel">Hotel</option>
          <option value="transport">Transport</option>
          <option value="insurance">Insurance</option>
          <option value="umrah">Umrah / Hajj</option>
        </select>
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-toggle-on mr-1"></i>Status</label>
        <select id="srchStatus">
          <option value="">All Status</option>
          <option value="ISSUED">Issued</option>
          <option value="REFUNDED">Refunded</option>
        </select>
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-calendar mr-1"></i>Date From</label>
        <input type="date" id="srchDateFrom">
      </div>
      <div class="tk-sf">
        <label><i class="fas fa-calendar-check mr-1"></i>Date To</label>
        <input type="date" id="srchDateTo">
      </div>
      <div class="tk-sf" style="justify-content: flex-end; padding-top: 1.1rem;">
        <button class="btn btn-primary btn-sm" id="tkSearchBtn" style="height:32px;font-size:.78rem;border-radius:7px;font-weight:800;">
          <i class="fas fa-search mr-1"></i>Search Invoices
        </button>
      </div>
    </div>

    <!-- Results -->
    <div class="tk-search-results" id="tkSearchResults" style="display:none;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;">
        <span style="font-size:.72rem;font-weight:700;color:#64748b;" id="tkSearchCount">0 results</span>
        <a href="{% url 'ticket:ticket_list' %}" class="btn btn-xs btn-outline-primary" style="font-size:.7rem;padding:2px 9px;border-radius:6px;">
          <i class="fas fa-external-link-alt mr-1"></i>Open Full List
        </a>
      </div>
      <div id="tkSearchEmpty" style="display:none;">
        <i class="fas fa-search-minus mr-2 text-muted"></i>No invoices found matching your search.
      </div>
      <div class="tk-tbl-scroll">
        <table class="tk-table" id="tkSearchTable" style="display:none;">
          <thead>
            <tr>
              <th>Folder#</th>
              <th>Date</th>
              <th>Type</th>
              <th>Status</th>
              <th>Client / Pax</th>
              <th>PNR</th>
              <th>Ticket#</th>
              <th>Passport</th>
              <th>Agent / Airline</th>
              <th class="tr">Receivable</th>
              <th class="tr">Income</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody id="tkSearchBody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     CHARTS ROW
     ══════════════════════════════════════════════════════════════ -->
<div class="tk-section-label"><i class="fas fa-chart-line mr-1"></i>Trends & Analytics</div>
<div class="row mb-2">
  <!-- Daily Trend Chart -->
  <div class="col-lg-8 mb-2">
    <div class="tk-panel">
      <div class="tk-panel-head">
        <div>
          <div class="tk-panel-title"><i class="fas fa-chart-area mr-2 text-primary"></i>Daily Receivable · Payable · Income</div>
          <div class="tk-panel-sub">Trend for selected range</div>
        </div>
        <div class="d-flex gap-1">
          <button class="btn btn-xs btn-outline-secondary" id="tkChartLine" style="font-size:.68rem;padding:2px 7px;border-radius:5px;">Line</button>
          <button class="btn btn-xs btn-outline-secondary" id="tkChartBar" style="font-size:.68rem;padding:2px 7px;border-radius:5px;">Bar</button>
        </div>
      </div>
      <div class="tk-panel-body">
        <div class="tk-chart-box"><canvas id="tkDailyChart"></canvas></div>
      </div>
    </div>
  </div>

  <!-- Service Mix Doughnut -->
  <div class="col-lg-4 mb-2">
    <div class="tk-panel">
      <div class="tk-panel-head">
        <div>
          <div class="tk-panel-title"><i class="fas fa-chart-pie mr-2" style="color:var(--tk-gold);"></i>Service Mix</div>
          <div class="tk-panel-sub">Income by service type</div>
        </div>
      </div>
      <div class="tk-panel-body">
        <div class="tk-chart-box" style="height:160px;"><canvas id="tkSvcPie"></canvas></div>
        <div id="tkSvcPieEmpty" class="text-center text-muted mt-2 d-none" style="font-weight:800;font-size:.8rem;">No data</div>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     AIRLINE + TOP CLIENTS
     ══════════════════════════════════════════════════════════════ -->
<div class="row mb-2">
  <!-- Airline / Supplier Performance -->
  <div class="col-lg-6 mb-2">
    <div class="tk-panel">
      <div class="tk-panel-head">
        <div>
          <div class="tk-panel-title"><i class="fas fa-plane-departure mr-2 text-primary"></i>Airline / Supplier Performance</div>
          <div class="tk-panel-sub">Grouped by category</div>
        </div>
        <a href="{% url 'ticket:ticket_reports' %}" class="btn btn-sm btn-outline-primary" style="border-radius:8px;font-size:.72rem;font-weight:800;">Full Report</a>
      </div>
      <div class="p-0">
        <div class="tk-tbl-scroll">
          <table class="tk-table">
            <thead><tr>
              <th>Airline / Supplier</th>
              <th class="tr">Inv.</th>
              <th class="tr">Receivable</th>
              <th class="tr">Commission</th>
              <th class="tr">Income</th>
            </tr></thead>
            <tbody id="tkAirlineBody"><tr><td colspan="5"><div class="tk-skel"></div></td></tr></tbody>
          </table>
        </div>
      </div>
      <div class="tk-inline-stats" id="tkAirlineStats" style="display:none;">
        <div class="tk-inline-stat"><div class="is-label">Total Airlines</div><div class="is-val" id="tkAirlineTotal">—</div></div>
        <div class="tk-inline-stat"><div class="is-label">Top Performer</div><div class="is-val" id="tkAirlineTop">—</div></div>
      </div>
    </div>
  </div>

  <!-- Top Clients -->
  <div class="col-lg-6 mb-2">
    <div class="tk-panel">
      <div class="tk-panel-head">
        <div>
          <div class="tk-panel-title"><i class="fas fa-users mr-2 text-primary"></i>Top Clients</div>
          <div class="tk-panel-sub">By receivable (Top 10)</div>
        </div>
      </div>
      <div class="p-0">
        <div class="tk-tbl-scroll">
          <table class="tk-table">
            <thead><tr>
              <th>#</th>
              <th>Client</th>
              <th class="tr">Invoices</th>
              <th class="tr">Receivable</th>
              <th class="tr">Balance Due</th>
              <th class="tr">Income</th>
            </tr></thead>
            <tbody id="tkClientBody"><tr><td colspan="6"><div class="tk-skel"></div></td></tr></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     BALANCE CARDS + INCOME COMPOSITION + RECENT
     ══════════════════════════════════════════════════════════════ -->
<div class="row mb-2">
  <!-- Ledger Balances + Income Bar -->
  <div class="col-lg-4 mb-2">
    <div class="tk-panel h-100">
      <div class="tk-panel-head">
        <div class="tk-panel-title"><i class="fas fa-balance-scale mr-2 text-primary"></i>Ledger Balances</div>
      </div>
      <div class="tk-panel-body">
        <div class="tk-bal-row">
          <div class="tk-bal-item tk-bal-ar">
            <div class="blab"><i class="fas fa-arrow-down mr-1"></i>Client AR</div>
            <div class="bval" id="tkCustAR">—</div>
            <div style="font-size:.62rem;color:#64748b;">Clients owe us</div>
          </div>
          <div class="tk-bal-item tk-bal-ap">
            <div class="blab"><i class="fas fa-arrow-up mr-1"></i>Client AP</div>
            <div class="bval" id="tkCustAP">—</div>
            <div style="font-size:.62rem;color:#64748b;">We owe clients</div>
          </div>
          <div class="tk-bal-item tk-bal-ap" style="background:#fff7ed;border-color:#fed7aa;">
            <div class="blab"><i class="fas fa-plane mr-1"></i>Airline AP</div>
            <div class="bval" style="color:#c2410c;" id="tkVendAP">—</div>
            <div style="font-size:.62rem;color:#64748b;">We owe airlines</div>
          </div>
          <div class="tk-bal-item tk-bal-ar" style="background:#f0fdf4;border-color:#bbf7d0;">
            <div class="blab"><i class="fas fa-plane-arrival mr-1"></i>Airline AR</div>
            <div class="bval" id="tkVendAR">—</div>
            <div style="font-size:.62rem;color:#64748b;">Airlines owe us</div>
          </div>
        </div>
        <div class="tk-bal-item tk-bal-bank mt-2">
          <div class="blab"><i class="fas fa-university mr-1"></i>Bank / Cash Position</div>
          <div class="bval" style="font-size:1.1rem;" id="tkNetCash">—</div>
        </div>

        <!-- Income Composition -->
        <div style="margin-top:.9rem;">
          <div style="font-size:.68rem;font-weight:800;color:#475569;text-transform:uppercase;margin-bottom:.35rem;">Income Composition</div>
          <div class="tk-inc-bar-wrap" id="tkIncomeBar">
            <div class="seg" style="background:var(--tk-blue);width:0%"></div>
            <div class="seg" style="background:var(--tk-green);width:0%"></div>
            <div class="seg" style="background:var(--tk-gold);width:0%"></div>
          </div>
          <div class="d-flex justify-content-between mt-1" style="font-size:.68rem;">
            <span><span style="display:inline-block;width:8px;height:8px;background:var(--tk-blue);border-radius:2px;margin-right:3px;"></span>Commission <strong id="tkIncCommPct">0%</strong></span>
            <span><span style="display:inline-block;width:8px;height:8px;background:var(--tk-green);border-radius:2px;margin-right:3px;"></span>PSF <strong id="tkIncPSFPct">0%</strong></span>
            <span><span style="display:inline-block;width:8px;height:8px;background:var(--tk-gold);border-radius:2px;margin-right:3px;"></span>Other <strong id="tkIncOtherPct">0%</strong></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Invoices -->
  <div class="col-lg-8 mb-2">
    <div class="tk-panel">
      <div class="tk-panel-head">
        <div>
          <div class="tk-panel-title"><i class="fas fa-history mr-2 text-primary"></i>Recent Invoices</div>
          <div class="tk-panel-sub">Latest 15 across all services</div>
        </div>
        <div class="d-flex gap-1">
          <a href="{% url 'ticket:ticket_list' %}" class="btn btn-sm btn-outline-primary" style="border-radius:8px;font-size:.72rem;font-weight:800;">
            <i class="fas fa-list mr-1"></i>All Invoices
          </a>
          <a href="{% url 'ticket:refund_list' %}" class="btn btn-sm btn-outline-danger" style="border-radius:8px;font-size:.72rem;font-weight:800;">
            <i class="fas fa-undo mr-1"></i>Refunds
          </a>
        </div>
      </div>
      <div class="p-0">
        <div class="tk-tbl-scroll" style="max-height:290px;">
          <table class="tk-table">
            <thead><tr>
              <th>Folder#</th>
              <th>Date</th>
              <th>Type</th>
              <th>Client</th>
              <th>Airline / Agent</th>
              <th>Status</th>
              <th class="tr">Receivable</th>
              <th class="tr">Income</th>
            </tr></thead>
            <tbody id="tkRecentBody"><tr><td colspan="8"><div class="tk-skel"></div></td></tr></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     QUICK LINKS ROW
     ══════════════════════════════════════════════════════════════ -->
<div class="tk-section-label no-print"><i class="fas fa-bolt mr-1"></i>Quick Actions</div>
<div class="row mb-2 no-print">
  {% url 'ticket:ticket_invoice' as url_new_ticket %}
  {% url 'ticket:ticket_list' as url_ticket_list %}
  {% url 'ticket:ticket_refund' as url_new_refund %}
  {% url 'ticket:refund_list' as url_refund_list %}
  {% url 'ticket:ticket_reports' as url_reports %}
  {% url 'ticket:airline_codes' as url_airlines %}
  {% url 'ticket:segment_list' as url_segments %}

  <div class="col-6 col-md-3 col-lg mb-2">
    <a href="{{ url_new_ticket }}" class="tk-panel d-flex align-items-center p-2 text-decoration-none" style="gap:.6rem;transition:box-shadow .15s;" onmouseover="this.style.boxShadow='0 6px 20px rgba(1,71,143,.15)'" onmouseout="this.style.boxShadow=''">
      <div class="tk-kpi-icon c-blue" style="width:36px;height:36px;background:rgba(1,71,143,.1);color:var(--tk-blue);border-radius:9px;display:flex;align-items:center;justify-content:center;"><i class="fas fa-plus"></i></div>
      <div><div style="font-size:.72rem;font-weight:800;color:#0f172a;">New Ticket</div><div style="font-size:.65rem;color:#94a3b8;">Issue invoice</div></div>
    </a>
  </div>
  <div class="col-6 col-md-3 col-lg mb-2">
    <a href="{{ url_new_refund }}" class="tk-panel d-flex align-items-center p-2 text-decoration-none" style="gap:.6rem;transition:box-shadow .15s;" onmouseover="this.style.boxShadow='0 6px 20px rgba(220,38,38,.15)'" onmouseout="this.style.boxShadow=''">
      <div style="width:36px;height:36px;background:rgba(220,38,38,.1);color:var(--tk-red);border-radius:9px;display:flex;align-items:center;justify-content:center;"><i class="fas fa-undo"></i></div>
      <div><div style="font-size:.72rem;font-weight:800;color:#0f172a;">New Refund</div><div style="font-size:.65rem;color:#94a3b8;">Process refund</div></div>
    </a>
  </div>
  <div class="col-6 col-md-3 col-lg mb-2">
    <a href="{{ url_ticket_list }}" class="tk-panel d-flex align-items-center p-2 text-decoration-none" style="gap:.6rem;transition:box-shadow .15s;" onmouseover="this.style.boxShadow='0 6px 20px rgba(22,163,74,.15)'" onmouseout="this.style.boxShadow=''">
      <div style="width:36px;height:36px;background:rgba(22,163,74,.1);color:var(--tk-green);border-radius:9px;display:flex;align-items:center;justify-content:center;"><i class="fas fa-list"></i></div>
      <div><div style="font-size:.72rem;font-weight:800;color:#0f172a;">Ticket List</div><div style="font-size:.65rem;color:#94a3b8;">All invoices</div></div>
    </a>
  </div>
  <div class="col-6 col-md-3 col-lg mb-2">
    <a href="{{ url_reports }}" class="tk-panel d-flex align-items-center p-2 text-decoration-none" style="gap:.6rem;transition:box-shadow .15s;" onmouseover="this.style.boxShadow='0 6px 20px rgba(180,83,9,.15)'" onmouseout="this.style.boxShadow=''">
      <div style="width:36px;height:36px;background:rgba(180,83,9,.1);color:var(--tk-gold);border-radius:9px;display:flex;align-items:center;justify-content:center;"><i class="fas fa-chart-bar"></i></div>
      <div><div style="font-size:.72rem;font-weight:800;color:#0f172a;">Reports</div><div style="font-size:.65rem;color:#94a3b8;">Full analytics</div></div>
    </a>
  </div>
  <div class="col-6 col-md-3 col-lg mb-2">
    <a href="{{ url_airlines }}" class="tk-panel d-flex align-items-center p-2 text-decoration-none" style="gap:.6rem;transition:box-shadow .15s;" onmouseover="this.style.boxShadow='0 6px 20px rgba(8,145,178,.15)'" onmouseout="this.style.boxShadow=''">
      <div style="width:36px;height:36px;background:rgba(8,145,178,.1);color:var(--tk-cyan);border-radius:9px;display:flex;align-items:center;justify-content:center;"><i class="fas fa-plane"></i></div>
      <div><div style="font-size:.72rem;font-weight:800;color:#0f172a;">Airlines</div><div style="font-size:.65rem;color:#94a3b8;">Short codes</div></div>
    </a>
  </div>
  <div class="col-6 col-md-3 col-lg mb-2">
    <a href="{{ url_segments }}" class="tk-panel d-flex align-items-center p-2 text-decoration-none" style="gap:.6rem;transition:box-shadow .15s;" onmouseover="this.style.boxShadow='0 6px 20px rgba(124,58,237,.15)'" onmouseout="this.style.boxShadow=''">
      <div style="width:36px;height:36px;background:rgba(124,58,237,.1);color:var(--tk-purple);border-radius:9px;display:flex;align-items:center;justify-content:center;"><i class="fas fa-route"></i></div>
      <div><div style="font-size:.72rem;font-weight:800;color:#0f172a;">Segments</div><div style="font-size:.65rem;color:#94a3b8;">Manage segments</div></div>
    </a>
  </div>
</div>


<!-- ══════════════════════════════════════════════════════════════
     DASHBOARD JS
     ══════════════════════════════════════════════════════════════ -->
<script>
(function(){
'use strict';

/* ── Helpers ── */
function fmt(n){ return Number(n||0).toLocaleString('en-PK', {minimumFractionDigits:0, maximumFractionDigits:0}); }
function fmtK(n){ n=Number(n||0); return n>=1000000?(n/1000000).toFixed(1)+'M':n>=1000?(n/1000).toFixed(0)+'K':n.toFixed(0); }

function ymdLocal(d){
  return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');
}

function getRange(){
  var p = document.getElementById('datePreset');
  var preset = p ? p.value : 'this_month';
  var today = new Date();
  if(preset==='custom'){
    var fEl=document.getElementById('from'), tEl=document.getElementById('to');
    return {from: fEl?fEl.value:'', to: tEl?tEl.value:''};
  }
  var fromD, toD;
  if(preset==='today')       { fromD=toD=today; }
  else if(preset==='7d')     { toD=today; fromD=new Date(today); fromD.setDate(fromD.getDate()-6); }
  else if(preset==='30d')    { toD=today; fromD=new Date(today); fromD.setDate(fromD.getDate()-29); }
  else /* this_month */      { toD=today; fromD=new Date(today.getFullYear(),today.getMonth(),1); }
  return {from:ymdLocal(fromD), to:ymdLocal(toD)};
}

function rangeParams(){
  var r=getRange();
  return '?from='+r.from+'&to='+r.to;
}

const tkUrls = {
  summary:    "{% url 'pos:tkt_dash_summary' %}",
  chartDaily: "{% url 'pos:tkt_dash_chart_daily' %}",
  airline:    "{% url 'pos:tkt_dash_airline' %}",
  clients:    "{% url 'pos:tkt_dash_clients' %}",
  recent:     "{% url 'pos:tkt_dash_recent' %}",
  search:     "{% url 'ticket:api_invoices_list' %}",
  svcBreak:   "{% url 'pos:tkt_dash_svc_breakdown' %}",
};

let tkDailyChart, tkSvcPie;
let tkChartType = 'line';

const SVC_COLORS = {
  ticket:    '#01478f',
  visa:      '#7c3aed',
  hotel:     '#b45309',
  transport: '#0d9488',
  insurance: '#dc2626',
  umrah:     '#be185d',
  other:     '#94a3b8',
};
const AIRLINE_COLORS = ['#01478f','#16a34a','#b45309','#7c3aed','#0891b2','#dc2626','#ea580c','#be185d','#0d9488','#334155'];

/* ── 1. Summary KPIs ── */
async function tkLoadSummary(){
  try {
    const rp = rangeParams();
    const j = await fetch(tkUrls.summary+rp).then(r=>r.json());
    const k = j.kpis || {};
    const rng = j.range || {};

    // Range label
    el('tkRangeLabel').textContent = (rng.from||'')+(rng.from?' → ':'')+( rng.to||'');

    // Core KPIs
    el('tkInvCount').textContent     = k.total_invoices || 0;
    el('tkIssuedCount').textContent  = k.issued_count   || 0;
    el('tkRefundedCount').textContent= k.refunded_count || 0;
    el('tkTicketCount').textContent  = k.ticket_count   || 0;
    el('tkRecv').textContent         = fmtK(k.total_receivable);
    el('tkPay').textContent          = fmtK(k.total_payable);
    el('tkIncome').textContent       = fmtK(k.total_income);
    el('tkComm').textContent         = fmtK(k.total_commission);
    el('tkPSF').textContent          = fmtK(k.total_psf);
    el('tkCashRecv').textContent     = fmtK(k.cash_received);
    el('tkPendRecv').textContent     = fmtK(k.pending_receivable);
    el('tkAvgIncome').textContent    = fmtK(k.avg_income);
    el('tkBank').textContent         = fmtK(k.bank_sum);

    // Refund KPIs
    el('tkRefundCount2').textContent = k.refunded_count || 0;
    el('tkRfndToClient').textContent = fmtK(k.rfnd_to_client);

    // Ledger Balances
    el('tkCustAR').textContent       = fmtK(k.cust_ar);
    el('tkCustAP').textContent       = fmtK(k.cust_ap);
    el('tkVendAP').textContent       = fmtK(k.vend_ap);
    el('tkVendAR').textContent       = fmtK(k.vend_ar);
    el('tkNetCash').textContent      = fmtK(k.bank_sum);

    // Income Composition Bar
    var totalInc = k.total_income || 1;
    var commPct  = Math.round((k.total_commission/totalInc)*100);
    var psfPct   = Math.round((k.total_psf/totalInc)*100);
    var otherPct = Math.max(0, 100 - commPct - psfPct);
    var segs = document.querySelectorAll('#tkIncomeBar .seg');
    if(segs[0]) segs[0].style.width = commPct+'%';
    if(segs[1]) segs[1].style.width = psfPct+'%';
    if(segs[2]) segs[2].style.width = otherPct+'%';
    el('tkIncCommPct').textContent  = commPct+'%';
    el('tkIncPSFPct').textContent   = psfPct+'%';
    el('tkIncOtherPct').textContent = otherPct+'%';

  } catch(e){ console.error('[tk-summary]',e); }
}

/* ── 2. Service Breakdown KPIs (from airline endpoint, grouped by inv_category prefix) ── */
async function tkLoadSvcBreakdown(){
  try {
    const j = await fetch(tkUrls.airline + rangeParams()).then(r=>r.json());
    const items = j.items || [];

    // Map inv_category to service type by keywords
    const svcMap = { ticket:0, visa:0, hotel:0, transport:0, insurance:0, umrah:0 };
    const svcInc = { ticket:0, visa:0, hotel:0, transport:0, insurance:0, umrah:0 };

    items.forEach(function(a){
      var cat = (a.airline||'').toLowerCase();
      var svc = 'ticket';
      if(cat.includes('visa'))                        svc='visa';
      else if(cat.includes('hotel'))                  svc='hotel';
      else if(cat.includes('transport')||cat.includes('car')||cat.includes('bus')) svc='transport';
      else if(cat.includes('insurance'))              svc='insurance';
      else if(cat.includes('umrah')||cat.includes('hajj')||cat.includes('ziyarat')) svc='umrah';
      svcMap[svc] += a.count;
      svcInc[svc] += a.income;
    });

    el('svcTicketCount').textContent     = svcMap.ticket     || '—';
    el('svcTicketIncome').textContent    = fmtK(svcInc.ticket);
    el('svcVisaCount').textContent       = svcMap.visa       || '—';
    el('svcVisaIncome').textContent      = fmtK(svcInc.visa);
    el('svcHotelCount').textContent      = svcMap.hotel      || '—';
    el('svcHotelIncome').textContent     = fmtK(svcInc.hotel);
    el('svcTransportCount').textContent  = svcMap.transport  || '—';
    el('svcTransportIncome').textContent = fmtK(svcInc.transport);
    el('svcInsuranceCount').textContent  = svcMap.insurance  || '—';
    el('svcInsuranceIncome').textContent = fmtK(svcInc.insurance);
    el('svcUmrahCount').textContent      = svcMap.umrah      || '—';
    el('svcUmrahIncome').textContent     = fmtK(svcInc.umrah);

    // Service Mix Pie
    var svcLabels  = ['Tickets','Visa','Hotel','Transport','Insurance','Umrah'];
    var svcData    = [svcInc.ticket,svcInc.visa,svcInc.hotel,svcInc.transport,svcInc.insurance,svcInc.umrah];
    var svcColors  = [SVC_COLORS.ticket,SVC_COLORS.visa,SVC_COLORS.hotel,SVC_COLORS.transport,SVC_COLORS.insurance,SVC_COLORS.umrah];
    var hasData    = svcData.some(function(v){ return v>0; });

    const pieCtx = document.getElementById('tkSvcPie').getContext('2d');
    if(tkSvcPie) tkSvcPie.destroy();

    if(!hasData){
      document.getElementById('tkSvcPieEmpty').classList.remove('d-none');
      return;
    }
    document.getElementById('tkSvcPieEmpty').classList.add('d-none');

    tkSvcPie = new Chart(pieCtx, {
      type: 'doughnut',
      data: {
        labels: svcLabels,
        datasets: [{ data: svcData, backgroundColor: svcColors, borderColor:'#fff', borderWidth:2 }]
      },
      options: {
        responsive:true, maintainAspectRatio:false, animation:{duration:400},
        plugins:{ legend:{ position:'bottom', labels:{ usePointStyle:true, boxWidth:8, font:{size:10} } } },
        cutout:'60%'
      }
    });
  } catch(e){ console.error('[tk-svc]',e); }
}

/* ── 3. Daily Chart ── */
async function tkLoadChart(){
  try {
    const j = await fetch(tkUrls.chartDaily + rangeParams()).then(r=>r.json());
    const ctx = document.getElementById('tkDailyChart').getContext('2d');
    if(tkDailyChart) tkDailyChart.destroy();

    var ds = [
      { label:'Receivable', data:j.receivable||[], fill:tkChartType==='line', borderColor:'#22c55e', backgroundColor:'rgba(34,197,94,.1)', tension:.35, pointRadius:0, borderWidth:2 },
      { label:'Payable',    data:j.payable||[],    fill:tkChartType==='line', borderColor:'#ef4444', backgroundColor:'rgba(239,68,68,.09)', tension:.35, pointRadius:0, borderWidth:2 },
      { label:'Income',     data:j.income||[],     fill:false,               borderColor:'#01478f', backgroundColor:'rgba(1,71,143,.75)',   tension:.35, pointRadius:0, borderWidth:2 },
    ];

    tkDailyChart = new Chart(ctx, {
      type: tkChartType,
      data: { labels: j.labels||[], datasets: ds },
      options: {
        responsive:true, maintainAspectRatio:false, animation:{duration:400},
        interaction:{mode:'index',intersect:false},
        plugins:{ legend:{ position:'bottom', labels:{ usePointStyle:true, boxWidth:8, font:{size:10} } } },
        scales:{ y:{ beginAtZero:true, ticks:{ callback:function(v){ return fmtK(v); } } } }
      }
    });
  } catch(e){ console.error('[tk-chart]',e); }
}

/* ── 4. Airline Breakdown Table ── */
async function tkLoadAirline(){
  try {
    const j = await fetch(tkUrls.airline + rangeParams()).then(r=>r.json());
    const items = j.items || [];
    const tb = document.getElementById('tkAirlineBody');

    if(!items.length){
      tb.innerHTML='<tr><td colspan="5" class="text-muted text-center py-3" style="font-size:.8rem;">No airline data for this period</td></tr>';
      return;
    }

    tb.innerHTML = items.map(function(a){
      return '<tr>' +
        '<td style="font-weight:800;">'+escHtml(a.airline)+'</td>' +
        '<td class="tr">'+a.count+'</td>' +
        '<td class="tr">'+fmt(a.receivable)+'</td>' +
        '<td class="tr" style="color:var(--tk-green);font-weight:700;">'+fmt(a.commission)+'</td>' +
        '<td class="tr" style="color:var(--tk-blue);font-weight:900;">'+fmt(a.income)+'</td>' +
        '</tr>';
    }).join('');

    // Inline stats
    var st = document.getElementById('tkAirlineStats');
    st.style.display='flex';
    el('tkAirlineTotal').textContent = items.length;
    el('tkAirlineTop').textContent   = items[0] ? items[0].airline : '—';

  } catch(e){ console.error('[tk-airline]',e); }
}

/* ── 5. Top Clients ── */
async function tkLoadClients(){
  try {
    const j = await fetch(tkUrls.clients + rangeParams()).then(r=>r.json());
    const items = j.items || [];
    const tb = document.getElementById('tkClientBody');

    if(!items.length){
      tb.innerHTML='<tr><td colspan="6" class="text-muted text-center py-3" style="font-size:.8rem;">No client data</td></tr>';
      return;
    }

    tb.innerHTML = items.map(function(c,i){
      var balCls = c.balance>0?'style="color:var(--tk-red);font-weight:800;"':'style="color:var(--tk-green);font-weight:800;"';
      return '<tr>' +
        '<td style="font-size:.68rem;color:#94a3b8;font-weight:800;">'+(i+1)+'</td>' +
        '<td style="font-weight:800;">'+escHtml(c.name)+'</td>' +
        '<td class="tr">'+c.count+'</td>' +
        '<td class="tr">'+fmt(c.receivable)+'</td>' +
        '<td class="tr" '+balCls+'>'+fmt(c.balance)+'</td>' +
        '<td class="tr" style="color:var(--tk-blue);font-weight:800;">'+fmt(c.income)+'</td>' +
        '</tr>';
    }).join('');
  } catch(e){ console.error('[tk-clients]',e); }
}

/* ── 6. Recent Invoices ── */
async function tkLoadRecent(){
  try {
    const j = await fetch(tkUrls.recent).then(r=>r.json());
    const items = j.items || [];
    const tb = document.getElementById('tkRecentBody');

    if(!items.length){
      tb.innerHTML='<tr><td colspan="8" class="text-muted text-center py-3" style="font-size:.8rem;">No recent invoices</td></tr>';
      return;
    }

    var svcBadgeMap = {
      'ticket':'tk-badge-ticket','visa':'tk-badge-visa','hotel':'tk-badge-hotel',
      'transport':'tk-badge-transport','insurance':'tk-badge-insurance','umrah':'tk-badge-umrah',
    };

    tb.innerHTML = items.map(function(inv){
      var bc   = inv.status==='REFUNDED'?'tk-badge-refunded':'tk-badge-issued';
      var cat  = (inv.category||'').toLowerCase();
      var svcT = 'ticket';
      if(cat.includes('visa')) svcT='visa';
      else if(cat.includes('hotel')) svcT='hotel';
      else if(cat.includes('transport')||cat.includes('car')) svcT='transport';
      else if(cat.includes('insurance')) svcT='insurance';
      else if(cat.includes('umrah')||cat.includes('hajj')) svcT='umrah';

      return '<tr style="cursor:pointer;" onclick="window.location.href=\'/ticket/'+inv.folder_no+'/\'">' +
        '<td><a href="/ticket/'+inv.folder_no+'/" class="fw-bold" style="color:var(--tk-blue);">'+inv.folder_no+'</a></td>' +
        '<td>'+inv.date+'</td>' +
        '<td><span class="tk-badge '+svcBadgeMap[svcT]+'">'+svcT.toUpperCase()+'</span></td>' +
        '<td style="max-width:110px;overflow:hidden;text-overflow:ellipsis;">'+escHtml(inv.client)+'</td>' +
        '<td>'+escHtml(inv.agent||inv.category||'')+'</td>' +
        '<td><span class="tk-badge '+bc+'">'+inv.status+'</span></td>' +
        '<td class="tr">'+fmt(inv.receivable)+'</td>' +
        '<td class="tr" style="color:var(--tk-green);font-weight:800;">'+fmt(inv.income)+'</td>' +
        '</tr>';
    }).join('');
  } catch(e){ console.error('[tk-recent]',e); }
}

/* ── 7. Advanced Search ── */
var searchTimeout;

function tkRunSearch(){
  var params = {
    date_from:  document.getElementById('srchDateFrom').value  || '',
    date_to:    document.getElementById('srchDateTo').value    || '',
    search:     buildSearchTerm(),
    status:     document.getElementById('srchStatus').value    || '',
    category:   document.getElementById('srchSvcType').value   || '',
    folder_no:  document.getElementById('srchFolder').value    || '',
    pnr:        document.getElementById('srchPNR').value       || '',
    passport:   document.getElementById('srchPassport').value  || '',
    cnic:       document.getElementById('srchCNIC').value      || '',
    ticket_no:  document.getElementById('srchTicket').value    || '',
    phone:      document.getElementById('srchPhone').value     || '',
  };

  // Need at least one filter
  var hasFilter = params.search||params.folder_no||params.pnr||params.passport||params.cnic||params.ticket_no||params.phone||params.status||params.category;
  if(!hasFilter && !params.date_from){
    return;
  }

  // Build query string
  var qs = Object.keys(params).filter(function(k){ return params[k]; }).map(function(k){
    return encodeURIComponent(k)+'='+encodeURIComponent(params[k]);
  }).join('&');

  var resultsEl = document.getElementById('tkSearchResults');
  var emptyEl   = document.getElementById('tkSearchEmpty');
  var tableEl   = document.getElementById('tkSearchTable');
  var bodyEl    = document.getElementById('tkSearchBody');
  var countEl   = document.getElementById('tkSearchCount');

  resultsEl.style.display = 'block';
  bodyEl.innerHTML = '<tr><td colspan="12" class="text-center py-2"><i class="fas fa-spinner fa-spin text-muted mr-2"></i><span style="font-size:.78rem;color:#94a3b8;">Searching...</span></td></tr>';
  tableEl.style.display = 'table';
  emptyEl.style.display = 'none';

  fetch(tkUrls.search + '?' + qs)
    .then(function(r){ return r.json(); })
    .then(function(data){
      if(!data.ok || !data.invoices || !data.invoices.length){
        emptyEl.style.display = 'block';
        tableEl.style.display = 'none';
        countEl.textContent = '0 results';
        return;
      }
      emptyEl.style.display = 'none';
      tableEl.style.display = 'table';
      countEl.textContent = data.invoices.length + ' invoice(s) found';

      bodyEl.innerHTML = data.invoices.map(function(inv){
        var bc = inv.status==='REFUNDED'?'tk-badge-refunded':'tk-badge-issued';
        return '<tr style="cursor:pointer;" onclick="window.location.href=\'/ticket/'+inv.folder_no+'/\'">' +
          '<td><a href="/ticket/'+inv.folder_no+'/" style="color:var(--tk-blue);font-weight:900;">#'+inv.folder_no+'</a></td>' +
          '<td>'+escHtml(inv.date||'')+'</td>' +
          '<td>'+escHtml(inv.category||'—')+'</td>' +
          '<td><span class="tk-badge '+bc+'">'+escHtml(inv.status)+'</span></td>' +
          '<td style="max-width:120px;overflow:hidden;text-overflow:ellipsis;">'+escHtml(inv.client||'')+'</td>' +
          '<td style="font-family:monospace;font-size:.72rem;">'+escHtml(inv.pnr||'—')+'</td>' +
          '<td style="font-family:monospace;font-size:.72rem;">'+escHtml(inv.ticket_no||'—')+'</td>' +
          '<td style="font-family:monospace;font-size:.72rem;">'+escHtml(inv.passport||'—')+'</td>' +
          '<td>'+escHtml(inv.agent||'—')+'</td>' +
          '<td class="tr">'+fmt(inv.receivable)+'</td>' +
          '<td class="tr" style="color:var(--tk-green);font-weight:800;">'+fmt(inv.income)+'</td>' +
          '<td><a href="/ticket/'+inv.folder_no+'/" class="btn btn-xs btn-outline-primary" style="font-size:.65rem;padding:1px 7px;border-radius:5px;"><i class="fas fa-eye"></i></a></td>' +
          '</tr>';
      }).join('');
    })
    .catch(function(e){ console.error('[tk-search]',e); });
}

function buildSearchTerm(){
  var t = document.getElementById('srchClient').value.trim();
  return t;
}

document.getElementById('tkSearchBtn').addEventListener('click', tkRunSearch);
document.getElementById('tkSearchClear').addEventListener('click', function(){
  ['srchFolder','srchPNR','srchPassport','srchCNIC','srchTicket','srchClient','srchPhone','srchDateFrom','srchDateTo'].forEach(function(id){
    var el2 = document.getElementById(id); if(el2) el2.value='';
  });
  document.getElementById('srchStatus').value = '';
  document.getElementById('srchSvcType').value = '';
  document.getElementById('tkSearchResults').style.display = 'none';
});

// Enter key on any search input
['srchFolder','srchPNR','srchPassport','srchCNIC','srchTicket','srchClient','srchPhone'].forEach(function(id){
  var inp = document.getElementById(id);
  if(inp) inp.addEventListener('keydown', function(e){ if(e.key==='Enter') tkRunSearch(); });
});

/* ── 8. Service Type Filter Tabs ── */
document.querySelectorAll('.tk-svc-tab').forEach(function(tab){
  tab.addEventListener('click', function(){
    document.querySelectorAll('.tk-svc-tab').forEach(function(t){ t.classList.remove('active'); });
    this.classList.add('active');
    var svc = this.dataset.svc;
    if(svc && svc !== 'all'){
      document.getElementById('srchSvcType').value = svc;
    } else {
      document.getElementById('srchSvcType').value = '';
    }
    // Auto scroll to search
    document.querySelector('.tk-search-panel').scrollIntoView({behavior:'smooth', block:'nearest'});
  });
});

/* ── Chart type toggle ── */
document.getElementById('tkChartLine').addEventListener('click', function(){
  tkChartType='line'; tkLoadChart();
});
document.getElementById('tkChartBar').addEventListener('click', function(){
  tkChartType='bar'; tkLoadChart();
});

/* ── Utilities ── */
function el(id){ return document.getElementById(id); }
function escHtml(s){
  return String(s||'').replace(/[&<>"']/g,function(c){
    return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  });
}

/* ── Run All ── */
window.tkRunAll = async function(){
  var tasks = [tkLoadSummary, tkLoadSvcBreakdown, tkLoadChart, tkLoadAirline, tkLoadClients, tkLoadRecent]
    .map(function(fn){ return fn().catch(function(e){ console.error('[tk-dash]',fn.name,e); }); });
  await Promise.all(tasks);
};

$(function(){ tkRunAll(); });

})();
</script>